<template>
	<view class="pk" v-if="dataList.length>0">
		<template v-for="(item) in dataList">
			<view class="pk-item" :key="item.id">
				<view class="item-pk" @tap="item.click=!item.click">
					<view class="item-user user-win">
						{{item.username1}}
					</view>
					<view class="item-user userAttr">
						<view class="attr" v-if="item.user1">
							{{item.user1.fenshu}}<text style="margin:0 10rpx">:</text>{{item.user2.fenshu}}
						</view>
						<view class="date">
							{{item.pk_date_s}} - {{item.pk_date_e}}
						</view>
					</view>
					<view class="item-user">
						{{item.username2}}
					</view>
				</view>
				<template v-if="item.click">
					<template v-for="item2 in  item.fenshuFieldlist">
						<view class="item-yeji">
							<view class="yeji-label">{{item2.text}}</view>
							<view class="yeji-progress">
								<view class="color" :style="computeWidth(item,item2,'user1')">
									<text>{{item.user1[item2.name]}}</text>
								</view>
								<view class="color" :style="computeWidth(item,item2,'user2')">
									<text> {{item.user2[item2.name]}}</text>
								</view>
							</view>
						</view>
					</template>
				</template>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			computeWidth(item, item2, user) {
				const total = Number(item.user1[item2.name]) + Number(item.user2[item2.name])
				let width = Number(item[user][item2.name]) / total * 100
				width = total < 0 ? 100 - width : width
				return `width:${width}%;padding:${width==0?0:'0 12rpx'}`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pk {
		padding: 30rpx;

		.user-win {
			background: url('/static/image/pkno1.png') no-repeat center;
			background-size: 120rpx;
		}

		&-item {
			padding: 30rpx 0;
			border-bottom: 0.5px solid #ddd;

			.item-pk {
				display: flex;

				.userAttr {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					align-items: center;
				}

				.item-user {
					width: 33.33%;
					text-align: center;

					&:first-child,
					&:last-child {
						border: 2rpx solid #ddd;
						line-height: 100rpx;
						font-size: 36rpx;
					}

					&:first-child {
						border: 4rpx solid #ddb30b;
						color: #ddb30b;
					}

					&:last-child {
						border: 4rpx solid #5470c6;
						color: #5470c6;
					}

					.attr {
						font-size: 72rpx;
						color: #1b5bc5;
						font-weight: 600;
						line-height: 60rpx;
					}

					.date {
						font-size: 24rpx;
						color: #666666;
					}
				}
			}

			.item-yeji {
				margin: 30rpx 0;
				display: flex;

				.yeji-label {
					width: 120rpx;
					text-align: center;
					font-size: 24rpx;
					line-height: 50rpx;
				}

				.yeji-progress {
					flex: 1;
					display: flex;
					height: 50rpx;
					line-height: 50rpx;

					.color {
						color: #fff;

						&:first-child {
							width: 50%;
							padding-left: 10rpx;
							background-color: #ddb30b;
						}

						&:last-child {
							text-align: right;
							flex: 1;
							padding-right: 10rpx;
							background-color: #5470c6;
						}
					}
				}
			}
		}
	}
</style>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>